<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/goods/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="../css/goods/shouhou_add_address.css" />

	<!-- <link rel="stylesheet" type="text/css" href="../css/goods/confirm_order.css" /> -->
	<link rel="stylesheet" href="../css/mui.picker.min.css">
	<script type="text/javascript">
		(function () {
			var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
			clientWidth = clientWidth || localStorage.getItem("clientWidth")
			if (clientWidth > 750)
				clientWidth = 750;
			document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
		})();
	</script>

</head>

<body>
	<div id="app">
		<header class="mui-bar mui-bar-nav" style="border-bottom: 1px solid #c5c5c5">
			<a class="mui-action-back mui-icon  mui-pull-left arr_left">
			</a>
			<h1 class="mui-title">问题反馈</h1>
			<a class="mui-pull-right" @click="sub_this">提交</a>
		</header>
		<div class="mui-content sqwtfk" style="background-color: #fff;">

			<div class="address_form">
				<div class="feedback_top" style="display: none;">
					<!--<img class="feedback_tx" src="../images/car_product_03.png" />-->
					<div class="star_box">
						<div class="" style="margin-left: 6px;">
							<b @click="change_star(1)" :class="star>0?'mui-icon mui-icon-star-filled':'mui-icon mui-icon-star'"></b>
							<b @click="change_star(2)" :class="star>1?'mui-icon mui-icon-star-filled':'mui-icon mui-icon-star'"></b>
							<b @click="change_star(3)" :class="star>2?'mui-icon mui-icon-star-filled':'mui-icon mui-icon-star'"></b>
							<b @click="change_star(4)" :class="star>3?'mui-icon mui-icon-star-filled':'mui-icon mui-icon-star'"></b>
							<b @click="change_star(5)" :class="star>4?'mui-icon mui-icon-star-filled':'mui-icon mui-icon-star'"></b>
							<!--<i class="mui-icon mui-icon-star-filled"></i>
                        <i class="mui-icon mui-icon-star"></i>
                        <i class="mui-icon mui-icon-star"></i>
                        <i class="mui-icon mui-icon-star"></i>
                        <i class="mui-icon mui-icon-star"></i>-->
						</div>
					</div>
				</div>
				<div class="text_info">
					<textarea class="fs_28" v-model="text_area" name="" rows="" placeholder="请写下您的宝贵意见.." cols=""></textarea>
				</div>
				<div class="hr_20"></div>
				<div class="imgs fbwz">

					<div id="has_img">

						<div class="img_item" v-for="(i,k) in imgs">
							<div class="has_img">
								<img :src="i.pic" />
							</div>

							<i class="mui-icon mui-icon-closeempty" @click="del_this(k)"></i>
						</div>

					</div>
					<div class="img_item add_img" @click="open_pic" v-show="add_img_flag">
						<i class="iconfont icon-paizhao"></i>
						<div class="fs_20">最多三张</div>
					</div>
				</div>

			</div>
			<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
				<!-- 可选择菜单 -->
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" id="paizhao">
						<a href="#">拍照</a>
					</li>
					<li class="mui-table-view-cell" id="xiangce">
						<a href="#">相册</a>
					</li>
				</ul>
				<!-- 取消菜单 -->
				<ul class="mui-table-view">
					<li class="mui-table-view-cell">
						<a href="#sheet1">
							<b>取消</b>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
	<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/tools/upload_img.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var uid = localStorage.getItem('uid');
		var bid = localStorage.getItem('bid');
		var app = new Vue({
			el: "#app",
			data: {
				imgs: [],
				add_img_flag: true,
				text_area: '',
				star: 0,
				user: '',
				sq_info: '',
			},
			methods: {
				open_pic: function () {
					mui('#sheet1').popover('toggle');
				},
				del_this: function (k) {
					this.imgs.splice(k, k + 1);
					if (this.imgs.length >= 3) { //控制上传图片数量
						this.add_img_flag = true;
					} else {
						this.add_img_flag = true;
					}
				},
				sub_this: function () {
				 
					//提交本页面
					content = this.text_area;
					var arrimg = []
					for (var i = 0; i < app.imgs.length; i++) {
						arrimg.push(app.imgs[i].pic)
					}
					$.get(url + "api/system/feedback_com_store", {
						uid: this.user.uid,
						bid: this.sq_info.sqid,
						content: content,
						pics: arrimg,
						 
					}, function (data) {
						console.log(data) ;
						if (data.code == 1) {
							mui.toast("反馈成功");
							setTimeout(function(){
								mui.back()
							},600)
							
						}
					}, 'json')
					
				},
				change_star: function (i) {
					this.star = i;
				}
			},
			created: function () {
				var user = localStorage.getItem("user")
				if (user) {
					user = JSON.parse(user)
				}
				console.log(user);
				this.user = user;

				var address = localStorage.getItem("address")
				if (address) {
					address = JSON.parse(address)
				}
				console.log(address);
				this.sq_info = address;
			},
			mounted: function () {
				var that = this;
				ts.select_img('xiangce', function (path) {
					mui.toast(path)
					mui('#sheet1').popover('hide');
					that.imgs.push({
						pic: path
					});
					if (that.imgs.length >= 3) { //控制上传图片数量
						that.add_img_flag = false;
					}
				});
				ts.get_img('paizhao', function (path) {
					mui.toast(path)
					mui('#sheet1').popover('hide');
					that.imgs.push({
						pic: path
					});
					if (that.imgs.length >= 3) { //控制上传图片数量
						that.add_img_flag = false;
					}
				});
			}
		})
	</script>
</body>

</html>
